<!-- @format -->

<template>
  <div>
    <el-button-pro
      type="primary"
      @click=""
      class="el-button-pro--hover-bg-color mgt-20"
      >123123</el-button-pro
    >
    <el-button-pro type="primary" class="el-button-pro--3d"
      >3D按钮</el-button-pro
    >
    <el-form-pro @register="theFormPro" @submit="onHandleSubmit">
      <template #slotANode="{ model }">
        <!-- 
        style="width: 100px; height: 100px; background-color: pink" -->
        <div @click="model.nickname = '1'">
          插槽1[点击修改nickname值]{{ model }}
        </div>
        <br />
        <div @click="model.checkboxGroup = ['1']">
          插槽3[点击修改checkboxGroup值]{{ model }}
        </div>
      </template>
      <template #slotANode2>
        <div style="width: 100px; height: 100px; background-color: skyblue">
          插槽2
        </div>
      </template>
    </el-form-pro>

    <el-space direction="vertical" wrap>
      <el-button @click="onGetFormProFieldsValue">
        获取所有字段值 getFieldsValue
      </el-button>
      <el-button @click="onSetFormProFieldsValue">
        动态给字段赋值 setFieldsValue
      </el-button>
      <el-button @click="onResetFormProFields">
        清空字段 resetFields
      </el-button>
      <el-button @click="onClearFormProValidate">
        清空校验 clearValidate
      </el-button>
      <el-button @click="onClearFormProValidate('nickname')">
        清空校验单个校验 clearValidate(name:string)
      </el-button>
    </el-space>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, nextTick, ref } from 'vue'
  // import { ElFormPro } from '@element-plus/components/form-pro'
  // ElFormPro,
  import { useFormPro } from '@shixinde/element-promax'
  // import { useForm } from '@shixinde/element-promax/components/form-pro'
  import { onGetSchemaData } from './form'

  const theFormProRef = ref()
  setTimeout(() => {
    console.log('theFormProRef.value ===>', theFormProRef.value)
  }, 100)
  const aaa = (e) => {
    console.log(e, 'eeeeeee')
  }
  const [
    theFormPro,
    {
      setProps: setFormProProps,
      setFieldsValue: setFormProFieldsValue,
      getFieldsValue: getFormProFieldsValue,
      resetFields: resetFormProFields,
      clearValidate: clearFormProValidate,
    },
  ] = useFormPro()
  console.log('setFormProProps ===>', setFormProProps)

  const onHandleSubmit = (e: any, e2: any) => {
    console.log('onHandleSubmit ===>', e, e2)
  }

  const onGetFormProFieldsValue = () => {
    console.log('onGetFormProFieldsValue ===>', getFormProFieldsValue())
  }
  const onResetFormProFields = () => {
    resetFormProFields()
    localStorage
    sessionStorage
  }
  const onClearFormProValidate = (name?: any) => {
    clearFormProValidate(name)
  }
  const onSetFormProFieldsValue = () => {
    setFormProFieldsValue({
      nickname: '1161',
    })
  }
  onMounted(async () => {
    setTimeout(async () => {
      await nextTick()
      await setFormProProps(onGetSchemaData())
    }, 1000)
  })
</script>
